<template>
  <v-scale-screen
    :delay="0"
    :box-style="{
      backgroundColor: '#051735',
    }"
  >
    <el-carousel
      v-if="!virtualShow"
      trigger="click"
      height="1080px"
      :interval="interval * 1000"
      indicator-position="none"
      :arrow="arrow"
    >
      <el-carousel-item v-for="item in 1" :key="item">
        <Materical
          v-if="item === 1"
          title="威士凯数智化车间 IQC进料检查"
          :pass-y-list="passYList"
          :data1="inferior1"
          :data2="inferior2"
          :data3="inferior3"
          :category-x-list="categoryXList"
          :category-y-list="categoryYList"
          :data-list="dataList"
        />
      </el-carousel-item>
    </el-carousel>
    <el-carousel
      v-if="virtualShow"
      trigger="click"
      height="1080px"
      :interval="interval * 1000"
      indicator-position="none"
      :arrow="arrow"
    >
      <el-carousel-item v-for="(i, k) in virtualList" :key="k">
        <Time-func />
        <img :src="i" style="width: 100%; height: 100%" />
      </el-carousel-item>
    </el-carousel>
  </v-scale-screen>
</template>
<script>
import { mapState } from "vuex";
import Consumption from "@/views/srceen/workshop/cp/Consumption";
import Schedule from "@/views/srceen/workshop/cp/Schedule";
import Materical from "@/views/srceen/workshop/cp/Materical";
import {
  getMaterialTypeSampling,
  getSamplingBadStatistics,
  getSamplingPassRateTrend,
  getPassRateRecord,
  getVirtualTurn,
  getVirtualDataById,
} from "@/api/srceen/workshop";
export default {
  components: {
    Consumption,
    Schedule,
    Materical,
  },
  data() {
    return {
      virtualShow: false, // 显示虚拟数据
      virtualList: [], // 虚拟数据
      passXList: [], // 物料种类抽检x轴
      passYList: [], // 物料种类抽检y轴
      inferior1: {
        id: "materical-inferior1",
        title: "物料种类抽检检验率",
        color: ["#2F7DF1", "#9C30CE"],
        data: [],
      },
      inferior2: {
        id: "materical-inferior2",
        title: "物料种类抽检合格率",
        color: ["#2F7DF1", "#f53f3f", "#9C30CE"],
        data: [],
      },
      inferior3: {
        id: "materical-inferior3",
        title: "前五大不良统计",
        color: [
          "#f53f3f",
          "#35a750",
          "#607de5",
          "#bead1f",
          "#2fcdc4",
          "#d3d3d3",
        ],
        data: [],
      },
      categoryXList: [], // 种类抽检合格率x轴
      categoryYList: [], // 种类抽检合格率y轴
      dataList: [], // 批次合格率记录
    };
  },
  computed: {
    ...mapState({
      interval: (state) => state.app.workshopDelay,
      arrow: (state) => state.app.workshopArrow,
      refresh: (state) => state.app.refresh,
    }),
  },
  watch: {
    refresh() {
      if (!this.virtualShow) {
        this.getList();
      }
    },
  },
  mounted() {
    this.checkVirtual();
  },
  methods: {
    // 检测是否是虚拟数据
    checkVirtual() {
      getVirtualTurn().then((res) => {
        this.virtualShow = res.data;
        if (res.data) {
          this.getVirtualData();
        } else {
          this.getList();
        }
      });
    },
    // 获取信息
    getList() {
      getMaterialTypeSampling("materialQuality").then((res) => {
        if (res.data) {
          this.inferior1.data = [
            {
              name: "进货批次总数",
              value: parseFloat(res.data.batchTotal || "0"),
            },
            {
              name: "检验批次",
              value: parseFloat(res.data.inspectTotal || "0"),
            },
          ];
          this.inferior2.data = [
            {
              name: "检验批次总数",
              value: parseFloat(res.data.inspectTotal || "0"),
            },
            {
              name: "不合格数量",
              value: parseFloat(res.data.failureNum || "0"),
            },
            {
              name: "批退数量",
              value: parseFloat(res.data.lotRejectNum || "0"),
            },
          ];
        }
      });

      getSamplingBadStatistics("materialQuality").then((res) => {
        if (res.data) {
          this.inferior3.data = res.data.map((i) => {
            return {
              name: i.type?.trim(),
              value: Number(i.value || "0"),
            };
          });
        } else {
          this.inferior3.data = [{ name: "", value: 0 }];
          this.inferior3.color = ["#d3d3d3"];
        }
      });

      getSamplingPassRateTrend("materialQuality").then((res) => {
        if (res.data) {
          this.categoryXList = res.data.xaxis || [];
          this.categoryYList = [
            {
              data: res.data.actual || [],
              name: "合格率",
              showSymbol: false,
            },
            {
              data: res.data.target || [],
              name: "目标",
              showSymbol: false,
            },
            {
              data: res.data.actual || [],
              name: "",
              showSymbol: true,
            },
          ];
        }
      });

      getPassRateRecord("materialQuality").then((res) => {
        if (res.data) {
          this.dataList = res.data || [];
        }
      });
    },
    // 获取虚拟数据图片
    getVirtualData() {
      getVirtualDataById({ id: "MATERIAL_QUALITY" }).then((res) => {
        if (res.data) {
          let imgs = res.data.imgUrl || "";
          this.virtualList = imgs.split(",");
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-carousel__arrow {
  background-color: rgba(0, 119, 255, 0.1);
}
</style>
